<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="杨宁争">
    <title></title>
    <style>
   
        .box{
            width: 200px;
            height: 520px;
            border: 1px solid lavenderblush;
            margin: 100px auto;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            text-align: center;
        }
        .title{
            width: 100%;
            height: 40px;
            background-color: lightgray;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
        .first{
            width: 180px;
            height: 150px;
              overflow: hidden;  
            margin: 5px 10px;
            position: relative;
        }
        li{
            position: relative;
        }
        .first p{
            margin: 0;
            padding: 0;
            width: 180px;
            height: 20px;
            background-color: orangered;
            position: absolute;
            bottom: 0;
            color: white;
            padding: 0 10px;
            
        }
        .info2{
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">专&nbsp辑&nbsp推&nbsp荐</div>
        <div class="first">
            <ul>
               <a href=""> <li><img src="1_1.jpg" alt=""></li></a>
              <a href="">  <li><img src="1_2.jpg" alt=""></li></a>
            </ul>
            <p class="info2">几何为网-极致绚烂</p>
            <p class="info1">COCOON/可可尼</p>
                
        </div>
        <div class="first">
            <ul>
                <a href=""><li><img src="2_1.jpg" alt=""></li></a>
               <a href=""> <li><img src="2_2.jpg" alt=""></li></a>
            </ul>
            <p class="info2" style="background-color: darkcyan;">INSUN/恩裳</p> 
            <p class="info1" style="background-color: darkcyan;">2017我的印象</p>
               
        </div>
        <div class="first">
           <ul>
              <a href="">  <li><img src="3_1.jpg" alt=""></li></a>
              <a href="">  <li><img src="3_2.jpg" alt=""></li></a>
            </ul>
            <p class="info2" style="background-color: lightgreen;">NANMENG/南梦</p>  
            <p class="info1" style="background-color: lightgreen;">JNBY/江南布衣</p>
              
        </div>
    </div>
</body>
<script src="./jquery.js"></script>
<script>
$('.first').hover(function(){
    $(this).find('li').stop().animate({
        right:180},500);
    $(this).find('.info1').stop().slideToggle(500)
    $(this).find('.info2').stop().slideToggle(500)
},function(){
    $(this).find('li').stop().animate({
        right:0},500);
    $(this).find('.info1').stop().slideToggle(500)
    $(this).find('.info2').stop().slideToggle(500)
});

</script>